<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css鹦鹉</title>

		<style>
			body {
				background-color: #2C5057;
				justify-content: space-around;
				display: flex;
				algin-items: center;
			}
			
			.parrot {
				height: 230px;
				width: 220px;
				margin-top: 30px;
				psotion: relative;
				background: #00A651;
				background: linear-gradient(#00C25E, #00A651, #00A651);
				border-radius: 50px 150px 30px 15px;
				box-shadow: inset 0 0 20px #225D59;
				transition: 0.5s;
			}
			
			.parrot::after {
				content: '';
				height: 170px;
				width: 170px;
				position: absolute;
				background: linear-gradient(#FBB040, #FBE642);
				transform: translate(-120px, 30px) rotate(-5deg);
				border-radius: 150px 50px 30px 10px;
				box-shadow: inset 5px 2px 20px rgba(60, 0, 0, .5);
				transition: 0.5s;
				transform-origin: 100% 0%;
			}
			
			.parrot:hover {
				transform: rotate(-8deg);
				transform-origin: 110% 100%;
			}
			
			.parrot:hover::after {
				transform: translate(-120px, 30px) rotate(3deg) scale(1, 0.96);
				);
				transform-origin: 110% 0%;
			}
			
			.parrot::before {
				content: '';
				height: 30px;
				width: 30px;
				position: absolute;
				background: #222222;
				transform: translate(70px, 50px);
				border-radius: 50%;
				box-shadow: 0 0 1px 5px #005500, 10px 0 1px 14px #eeeeee, 8px -4px 5px 17px #009453, -60px 145px 2px 6px #00A651, -30px 135px 2px 8px #00A651, 3px 125px 2px 8px #00A651, 35px 115px 2px 8px #00A651, 70px 100px 2px 8px #00A651, 100px 90px 2px 8px #00A651, 110px 80px 2px 8px #00A651, -60px 165px 2px 10px #009453, -30px 155px 2px 10px #009453, 3px 145px 2px 10px #009453, 35px 135px 2px 10px #009453, 70px 120px 2px 10px #009453, 100px 110px 2px 10px #009453, 120px 100px 2px 10px #009453, -62px 180px 2px 10px #008656, -30px 175px 2px 10px #008656, 10px 170px 2px 10px #008656, 55px 160px 2px 10px #008656, 90px 145px 2px 10px #008656, 130px 130px 2px 10px #008656, -67px 200px 3px 10px #007959, -20px 193px 3px 10px #007959, 30px 180px 3px 10px #007959, 80px 170px 3px 10px #007959, 130px 160px 3px 10px #007959, -70px 220px 3px 10px #076B5A, -30px 210px 3px 10px #076B5A, 10px 200px 3px 10px #076B5A, 60px 190px 3px 10px #076B5A, 110px 180px 3px 10px #076B5A, -70px 235px 5px 10px #225D59, -25px 225px 5px 10px #225D59, 25px 215px 5px 10px #225D59, 75px 205px 5px 10px #225D59, 125px 195px 5px 10px #225D59, 135px 170px 5px 10px #225D59;
			}
		</style>
	</head>

	<body>

		<div class='parrot'></div>

	</body>

</html>